<template>
	<view class="contain ">
		<view class="flex-col relative page">
			<view class="flex-col justify-start items-start image-wrapper">
				<image class="shrink-0 image"
					src="https://qiniu.ccchongya.com/chongya/images/16947555454840105279.png" />
			</view>
			<view class="flex-col justify-start items-center relative section_7">
				<image class="shrink-0 image_3"
					src="https://qiniu.ccchongya.com/chongya/images/16947555450690292224.png" />
				<image class="shrink-0 image_4 pos_10"
					src="https://qiniu.ccchongya.com/chongya/images/16947555450755155959.png" />
				<image class="shrink-0 image_6 pos_13"
					src="https://qiniu.ccchongya.com/chongya/images/16947555452086621574.png" />
				<text class="text_7 pos_11">拖运优惠券</text>
				<view class="flex-row justify-between items-end section_9 pos_15">
					<view class="flex-row items-start relative group_2 space-x-20">
						<view class="flex-row items-baseline group_4">
							<text class="text_9">20</text>
							<text class="font_4 text_12">￥</text>
						</view>
						<view class="flex-col group_3 space-y-10">
							<image class="self-start image_5"
								src="https://qiniu.ccchongya.com/chongya/images/16947555453030294509.png" />
							<text class="self-end font_4 text_10">20元新人券</text>
						</view>
					</view>
					<view class="flex-col justify-start items-center text-wrapper_4">
						<text class="font_4 text_11">立即领取</text>
					</view>
				</view>
				<view class="shrink-0 section_8 pos_14"></view>
				<view class="shrink-0 section_8 pos_17"></view>
				<view class="shrink-0 section_10 pos_16"></view>
				<text class="font_4 text_8 pos_12">更多</text>
			</view>
			<view class="flex-row equal-division">
				<view class="flex-row justify-center items-center section_11 equal-division-item space-x-10">
					<image class="image_7"
						src="https://qiniu.ccchongya.com/chongya/images/16947555453065282297.png" />
					<text class="font_1">发单人必读</text>
				</view>
				<view class="flex-row justify-center items-center section_12 equal-division-item space-x-10">
					<image class="image_7"
						src="https://qiniu.ccchongya.com/chongya/images/16947555453937427871.png" />
					<text class="font_1">安全规则</text>
				</view>
			</view>

			<text class="text pos_2">宠物托运我最专业</text>
			<text class="text_2 pos_3">我们用心，为你宠物爱的旅程护航！</text>
			<view class="flex-row section_2 pos_4">
				<view class="flex-col justify-start items-start image-wrapper_2 pos_5">
					<image class="image_2"
						src="https://qiniu.ccchongya.com/chongya/images/16947555455297629691.png" />
				</view>
				<text class="font_1 text_4 pos_7">国际运输</text>
				<view class="flex-col section_3 pos_8">
				<!-- 	<view class="flex-row justify-between items-center section_4"
						@click="go('/pages/user/address?type=ty_from');addressType = 'from'"> -->
					<view class="flex-row justify-between items-center section_4"
						@click="getMapLocationFrom">
						<view class="flex-row items-center space-x-14">
							<block v-if="!addressFrom.name">
								<view class="flex-col justify-start items-center text-wrapper"><text
										class="font_3">发</text></view>
								<view class="flex-col items-start space-y-12">
									<text class="text_5">从哪里出发？</text>
									<text class="font_4">填写邮寄人地址信息</text>
								</view>
							</block>
							<block v-else>
								<view class="flex-col justify-start items-center text-wrapper"><text
										class="font_3">发</text>
								</view>
								<view class="flex-col space-y-12">
									<view class="flex-row space-x-8">
										<text class="font_2">{{addressFrom.name}}</text>
										<text
											class="font_2">{{addressFrom.address}}</text>
									</view>
									<text
										class="self-start font_4">{{addressFrom.realname}}{{addressFrom.memberName}}</text>
								</view>
							</block>
						</view>
						<!-- <text class="font_4">常用地址</text> -->
					</view>
					<view class="flex-row justify-between items-center section_5" @click="getMapLocationTo">
						<view class="flex-row items-center space-x-14">
							<block v-if="!addressTo.name">
								<view class="flex-col justify-start items-center text-wrapper_2"><text
										class="font_3">收</text></view>
								<view class="flex-col items-start space-y-12">
									<text class="text_5">要送到哪里？</text>
									<text class="font_4">填写发出人地址信息</text>
								</view>
							</block>
							<block v-else>
								<view class="flex-col justify-start items-center text-wrapper_2"><text
										class="font_3">收</text>
								</view>
								<view class="flex-col space-y-12">
									<view class="flex-row space-x-8">
										<text class="font_2">{{addressTo.name}}</text>
										<text
											class="font_2">{{addressTo.address}}</text>
									</view>
									<text
										class="self-start font_4">{{addressTo.realname}}{{addressTo.memberName}}</text>
								</view>
							</block>
						</view>
						<!-- <text class="font_4">常用地址</text> -->
					</view>
					<view class="flex-col justify-start items-center relative group">
						<view class="section_6"></view>
						<view class="flex-col justify-start items-center text-wrapper_3 pos_9"
							@click="go('/pages/ys/order/sure');">
							<text class="text_6">立即约单</text>
						</view>
					</view>
				</view>
				<view class="shrink-0 section pos"></view>
			</view>
			<text class="text_3 pos_6">宠物拖运</text>
		</view>

		<tab-bar ref="tabbar" :showLogin="true" :active="2" :isShow="false"></tab-bar>
	</view>
</template>
<script>
	import issueBtn from '@/components/issuebtn.vue';
	import findList from '@/components/findlist.vue';
	const API = require('@/utils/api/find.js').default;
	const $ = require('@/utils/api.js');
	let self;
	export default {
		data() {
			return {
				top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
				isIphonex: uni.getStorageSync('isIphonex') ? uni.getStorageSync('isIphonex') : false,
				active: 0,
				list: [],
				page: 1,
				pageSize: 20,
				totalPage: 1,
				isRefresh: false,
				refreshClass: [''],
				style: '',
				addressType: '',
				addressTo: {},
				addressFrom: {},
			};
		},
		onLoad: function() {
			self = this;
			this.addressTo = uni.getStorageSync('tyAddressTo');
			this.addressFrom = uni.getStorageSync('tyAddressFrom');
			this.init();
		},
		onShow() {
			this.$nextTick(() => {
				this.$refs.tabbar.getChatLen();
			})
			// this.convertAddressToLatLng();
		},
		methods: {
			    async convertAddressToLatLng() {
			     await  this.mapfun.getAddressLatLng("宜昌市五一广场")
										.then((res) => {
											console.log("成功:", res); // 操作成功时执行
											if (res.status === '1' && res.count !== '0') {
											  const geocode = res.geocodes[0];
											  let  info =  {
												longitude: geocode.location.split(',')[0],
												latitude: geocode.location.split(',')[1]
											  };
											}


						})
						.catch((error) => {
						console.error("失败:", error.message); // 操作失败时执行
				});
				 // console.log(result)
			     // if (result) {
			     //   this.longitude = result.longitude;
			     //   this.latitude = result.latitude;
			     // } else {
			     //   // 地址转换失败
			     //   uni.showToast({
			     //     title: '地址转换失败1111',
			     //     duration: 2000,
			     //   });
			     // }
			   },

			 getMapLocationFrom(){
				let that = this
			 	uni.chooseLocation({
			 		success:(res)=> {
			 			console.log(res);

			 						that.addressFrom.name =  res.name
			 						that.addressFrom.address = res.address
			 						that.addressFrom.latitude = res.latitude
			 						that.addressFrom.longitude = res.longitude
			 						console.log('位置名称：' + res.name);
			 						console.log('详细地址：' + res.address);
			 						console.log('纬度：' + res.latitude);
			 						console.log('经度：' + res.longitude);
			 			// this.getRegionFn(res);
			 		},
			 		fail:()=>{
			 			// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
			 			uni.getSetting({
			 				success: (res) => {
			 					console.log(res);
			 					var status = res.authSetting;
			 					if(!status['scope.userLocation']){
			 					// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
			 						uni.showModal({
			 							title:"是否授权当前位置",
			 							content:"需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
			 							success:(tip)=>{
			 								if(tip.confirm){
			 								// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
			 									uni.openSetting({
			 										success:(data)=>{
			 										// 如果用户授权了地理信息在，则提示授权成功
			 											if(data.authSetting['scope.userLocation']===true){
			 												uni.showToast({
			 													title:"授权成功",
			 													icon:"success",
			 													duration:1000
			 												})
			 												// 授权成功后，然后再次chooseLocation获取信息
			 												uni.chooseLocation({
			 													success: (res) => {
			 														console.log("详细地址",res);
			 														// this.getRegionFn(res);
			 													}
			 												})
			 											}else{
			 												uni.showToast({
			 													title:"授权失败",
			 													icon:"none",
			 													duration:1000
			 												})
			 											}
			 										}
			 									})
			 								}
			 							}
			 						})
			 					}
			 				},
			 				fail: (res) => {
			 					uni.showToast({
			 						title:"调用授权窗口失败",
			 						icon:"none",
			 						duration:1000
			 					})
			 				}
			 			})
			 		}
			 	});
			 },
			 getMapLocationTo(){
				  let that = this
			 	uni.chooseLocation({
			 		success:(res)=> {
			 			console.log(res);

			 						that.addressTo.name =  res.name
			 						that.addressTo.address = res.address
			 						that.addressTo.latitude = res.latitude
			 						that.addressTo.longitude = res.longitude
			 						console.log('位置名称：' + res.name);
			 						console.log('详细地址：' + res.address);
			 						console.log('纬度：' + res.latitude);
			 						console.log('经度：' + res.longitude);
			 			// this.getRegionFn(res);
			 		},
			 		fail:()=>{
			 			// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
			 			uni.getSetting({
			 				success: (res) => {
			 					console.log(res);
			 					var status = res.authSetting;
			 					if(!status['scope.userLocation']){
			 					// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
			 						uni.showModal({
			 							title:"是否授权当前位置",
			 							content:"需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
			 							success:(tip)=>{
			 								if(tip.confirm){
			 								// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
			 									uni.openSetting({
			 										success:(data)=>{
			 										// 如果用户授权了地理信息在，则提示授权成功
			 											if(data.authSetting['scope.userLocation']===true){
			 												uni.showToast({
			 													title:"授权成功",
			 													icon:"success",
			 													duration:1000
			 												})
			 												// 授权成功后，然后再次chooseLocation获取信息
			 												uni.chooseLocation({
			 													success: (res) => {
			 														console.log("详细地址",res);
			 														// this.getRegionFn(res);
			 													}
			 												})
			 											}else{
			 												uni.showToast({
			 													title:"授权失败",
			 													icon:"none",
			 													duration:1000
			 												})
			 											}
			 										}
			 									})
			 								}
			 							}
			 						})
			 					}
			 				},
			 				fail: (res) => {
			 					uni.showToast({
			 						title:"调用授权窗口失败",
			 						icon:"none",
			 						duration:1000
			 					})
			 				}
			 			})
			 		}
			 	});
			 },
			chooseLocation(){
						uni.chooseLocation({
							success: function (res) {
								console.log('位置名称：' + res.name);
								console.log('详细地址：' + res.address);
								console.log('纬度：' + res.latitude);
								console.log('经度：' + res.longitude);


								  let reg = /.+?(省|市|自治区|自治州|县|区)/g
								                        let address1 = res.address
								                        let address = address1.match(reg)
								                        // that.form.locationAddress = res.address.split(address[Number(address.length - 1)])[1] + res.name
								                        // that.form.location = [Number(res.latitude), Number(res.longitude)]


							}
						});
			},
			chooseLocationTo(){
						uni.chooseLocation({
							success: function (res) {


								this.addressTo.name =  res.name
								addressTo.address = res.address
								addressTo.latitude = res.latitude
								addressTo.longitude = res.longitude
								console.log('位置名称：' + res.name);
								console.log('详细地址：' + res.address);
								console.log('纬度：' + res.latitude);
								console.log('经度：' + res.longitude);

								// <text class="font_2">{{addressTo.province}}</text>
								// 		<text
								// 			class="font_2">{{addressTo.city}}{{addressTo.area}}{{addressTo.address}}</text>
								// 	</view>
								// 	<text
								// 		class="self-start font_4">{{addressTo.realname}}{{addressTo.memberName}}</text>
								// </view>



								let regex = "(?<province>[^省]+省|.+自治区)(?<city>[^自治州]+自治州|[^市]+市|[^盟]+盟|[^地区]+地区|.+区划)(?<county>[^市]+市|[^县]+县|[^旗]+旗|.+区)?(?<town>[^区]+区|.+镇)?(?<village>.*)";
								let address = "安徽省淮南市大通区大通街道某某某";
								console.log(address.match(regex));


								// let reg = /.+?(省|市|自治区|自治州|县|区)/g
								// let address1 = res.address
								// let address = address1.match(reg)
								// that.form.locationAddress = res.address.split(address[Number(address.length - 1)])[1] + res.name
								// that.form.location = [Number(res.latitude), Number(res.longitude)]


							}
						});
			},
			// public class AddressResolution {

			//     /**
			//      * 解析地址
			//      * @author cjw
			//      * @param address
			//      * @return
			//      */
			//     public static List<Map<String,String>> addressResolution(String address){
			//         String regex="(?<province>[^省]+省|.+自治区)(?<city>[^自治州]+自治州|[^市]+市|[^盟]+盟|[^地区]+地区|.+区划)(?<county>[^市]+市|[^县]+县|[^旗]+旗|.+区)?(?<town>[^区]+区|.+镇)?(?<village>.*)";
			//         Matcher m=Pattern.compile(regex).matcher(address);
			//         String province=null,city=null,county=null,town=null,village=null;
			//         List<Map<String,String>> list=new ArrayList<Map<String,String>>();
			//         Map<String,String> row=null;
			//         while(m.find()){
			//             row=new LinkedHashMap<String,String>();
			//             province=m.group("province");
			//             row.put("province", province==null?"":province.trim());
			//             city=m.group("city");
			//             row.put("city", city==null?"":city.trim());
			//             county=m.group("county");
			//             row.put("county", county==null?"":county.trim());
			//             town=m.group("town");
			//             row.put("town", town==null?"":town.trim());
			//             village=m.group("village");
			//             row.put("village", village==null?"":village.trim());
			//             list.add(row);
			//         }
			//         return list;
			//     }
			// //    public static void main(String[] args) {
			// //        System.out.println("地址是：" + addressResolution("宁夏回族自治区银川市灵武市"));
			// //    }
			// }
			setAddress(item) {
				console.log("address", item, this.addressType)
				if (this.addressType == 'to') {
					this.addressTo = item
					uni.setStorageSync('tyAddressTo', this.addressTo);
				} else {
					this.addressFrom = item
					uni.setStorageSync('tyAddressFrom', this.addressFrom);
				}
			},
			getList() {
				const self = this;
				$.ajax({
					url: API.findListApi,
					data: {
						type: '',
						page: self.page,
						pageSize: self.pageSize
					},
					method: 'GET',
					success(res) {
						let list = res.data.list ? res.data.list : [];
						if (list.length <= 0 && self.page == 1) {
							self.list = [];
							return;
						}
						list.forEach((ele, index) => {
							let obj = ele.walkTrends;
							obj.collectTrends = ele.collectTrends;
							obj.collectWalkMember = ele.collectWalkMember;
							obj.index = index;
							if (obj.videoUrl && obj.videoUrl != '') {
								obj['mainImg'] = obj.videoUrl + '?vframe/jpg/offset/0/w/300';
							} else if (String(obj.images).indexOf('|') >= 0) {
								obj['mainImg'] = obj.images.split('|')[0];
							} else {
								obj['mainImg'] = obj.images;
							}
							self.list.push(obj);
						})
						self.totalPage = res.data.totalPage;
						uni.stopPullDownRefresh();
						// #ifdef MP-WEIXIN
						if (self.isRefresh) {
							self.isRefresh = false;
							self.refreshClass = ['fadeIn'];
						}
						// #endif

					}
				})
			},
			init() {
				this.page = 1;
				this.list = [];
				this.getList();
				this.getStyle().then((res) => {
					self.style = res;
				})
			},
		},
		computed: {
			i18n() {
				return this.$t('find')
			},
		},
		created() {},
		mounted() {},
		destroyed() {},
		components: {
			issueBtn,
			findList
		},
		onPullDownRefresh() {
			// #ifdef MP-WEIXIN
			this.isRefresh = true;
			this.refreshClass = ['fadeOut'];
			// #endif
			this.init();
		},
		onReachBottom() {
			if (this.page < this.totalPage) {
				this.page += 1;
				this.getList();
			}
		}
	}
</script>
<style scoped>
	@import url('../../static/css/style.css');

	.page {
		background-color: #f5f7f7;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.image-wrapper {
		padding-top: 52rpx;
		background-image: linear-gradient(0deg, #ffffff 0%, #ffbd52 100%);
		overflow: hidden;
		height: 696rpx;
	}

	.image {
		margin-left: 552rpx;
		width: 750rpx;
		height: 696rpx;
	}

	.section_7 {
		margin: 224rpx 22rpx 0;
		background-color: #fc730033;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.image_3 {
		filter: blur(6rpx);
		width: 706rpx;
		height: 198rpx;
	}

	.image_4 {
		width: 144rpx;
		height: 160rpx;
	}

	.pos_10 {
		position: absolute;
		left: 0;
		top: 0;
	}

	.image_6 {
		width: 284rpx;
		height: 154rpx;
	}

	.pos_13 {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.text_7 {
		color: transparent;
		font-size: 32rpx;
		font-family: PangMenZhengDao;
		line-height: 23rpx;
		background-image: linear-gradient(180deg, #fd6c01 0%, #e36105 100%);
		-webkit-background-clip: text;
	}

	.pos_11 {
		position: absolute;
		left: 30rpx;
		top: 27rpx;
	}

	.section_9 {
		padding: 0 24rpx 24rpx 32rpx;
		background-color: #ffffffbf;
		border-radius: 20rpx;
		height: 100rpx;
	}

	.pos_15 {
		position: absolute;
		left: 16rpx;
		right: 18rpx;
		top: 80rpx;
	}

	.group_2 {
		margin-top: -68rpx;
	}

	.space-x-20>view:not(:first-child),
	.space-x-20>text:not(:first-child),
	.space-x-20>image:not(:first-child) {
		margin-left: 40rpx;
	}

	.group_4 {
		margin-top: 88rpx;
		width: 105rpx;
	}

	.text_9 {
		margin-left: 24rpx;
		color: #fc7300;
		font-size: 72rpx;
		font-family: HarmonyOSSansSC;
		line-height: 54rpx;
	}

	.font_4 {
		font-size: 24rpx;
		font-family: HarmonyOSSansSC;
		line-height: 22rpx;
		color: #666e7a;
	}

	.text_12 {
		margin-left: -104rpx;
		color: #fc7505;
		line-height: 18rpx;
	}

	.group_3 {
		width: 176rpx;
	}

	.space-y-10>view:not(:first-child),
	.space-y-10>text:not(:first-child),
	.space-y-10>image:not(:first-child) {
		margin-top: 20rpx;
	}

	.image_5 {
		width: 70rpx;
		height: 82rpx;
	}

	.text_10 {
		line-height: 23rpx;
	}

	.text-wrapper_4 {
		padding: 16rpx 0;
		background-image: linear-gradient(90deg, #fc7402 0%, #ff5e4d 100%);
		border-radius: 406rpx;
		width: 136rpx;
		height: 50rpx;
	}

	.text_11 {
		color: #ffffff;
	}

	.section_8 {
		background-color: #fee0c4;
		border-radius: 50%;
		width: 17rpx;
		height: 17rpx;
	}

	.pos_14 {
		position: absolute;
		left: 165rpx;
		top: 71rpx;
	}

	.pos_17 {
		position: absolute;
		left: 165rpx;
		top: 169rpx;
	}

	.section_10 {
		background-image: repeating-linear-gradient(90deg, #fee0c4, #fee0c4 4.79%, transparent 4.79%, transparent 9.576%);
		background-position: -2rpx 0px;
		width: 2rpx;
		height: 84rpx;
	}

	.pos_16 {
		position: absolute;
		left: 172rpx;
		top: 85rpx;
	}

	.text_8 {
		color: #7d3a0a;
		line-height: 23rpx;
	}

	.pos_12 {
		position: absolute;
		right: 29rpx;
		top: 28rpx;
	}

	.equal-division {
		margin: 26rpx 22rpx 0;
	}

	.section_11 {
		flex: 1 1 338rpx;
	}

	.image_7 {
		width: 50rpx;
		height: 50rpx;
	}

	.font_1 {
		font-size: 28rpx;
		font-family: HarmonyOSSansSC;
		line-height: 26rpx;
		color: #1a0d03ba;
	}

	.section_12 {
		flex: 1 1 338rpx;
		margin-left: 26rpx;
	}

	.equal-division-item {
		padding: 32rpx 68rpx;
		background-color: #ffbd522b;
		border-radius: 10rpx;
		height: 110rpx;
	}

	.space-x-10>view:not(:first-child),
	.space-x-10>text:not(:first-child),
	.space-x-10>image:not(:first-child) {
		margin-left: 20rpx;
	}

	.equal-division_2 {
		margin-top: 242rpx;
	}

	.section_13 {
		padding: 24rpx 0;
		background-color: #ffffff;
		overflow: hidden;
	}

	.group_5 {
		flex: 1 1 150rpx;
	}

	.equal-division-item_2 {
		padding: 12rpx 0;
	}

	.space-y-4>view:not(:first-child),
	.space-y-4>text:not(:first-child),
	.space-y-4>image:not(:first-child) {
		margin-top: 8rpx;
	}

	.image_8 {
		width: 48rpx;
		height: 48rpx;
	}

	.font_5 {
		font-size: 20rpx;
		font-family: HarmonyOSSansSC;
		line-height: 18rpx;
		color: #666e7a;
	}

	.text_13 {
		color: #ffbd52;
	}

	.text {
		/* color: transparent;
  font-size: 48rpx;
  font-family: YouSheBiaoTiYuan;
  line-height: 37rpx;
  background-image: linear-gradient(180deg, #ed800c 0%, #f2553d 100%);
  -webkit-background-clip: text;
  text-shadow: 0 4rpx #ffffff, 0 -4rpx #ffffff, 4rpx 0 #ffffff, -4rpx 0 #ffffff, -8rpx -6rpx 26rpx #ffffff40; */
		color: #ef721c;
		font-size: 48rpx;
		font-family: HarmonyOSSansSC;
		font-weight: 700;
		line-height: 13px;
		text-shadow: 0 1px #ffffff, 0 -1px #ffffff, 1px 0 #ffffff, -1px 0 #ffffff, -4px -3px 13px #ffffff40;
	}

	.pos_2 {
		position: absolute;
		left: 41rpx;
		top: 123rpx;
	}

	.text_2 {
		color: #ef721c;
		font-size: 24rpx;
		font-family: HarmonyOSSansSC;
		font-weight: 700;
		line-height: 25rpx;
		text-shadow: 0 2rpx #ffffff, 0 -2rpx #ffffff, 2rpx 0 #ffffff, -2rpx 0 #ffffff, -8rpx -6rpx 26rpx #ffffff40;
	}

	.pos_3 {
		position: absolute;
		left: 39rpx;
		top: 178rpx;
	}

	.section_2 {
		opacity: 0.9;
		background-color: #ffffff4f;
		border-radius: 20rpx;
		filter: drop-shadow(0px 0px 8rpx #ffbd5208);
		backdrop-filter: blur(58rpx);
		/* overflow: hidden; */
		height: 640rpx;
	}

	.pos_4 {
		position: absolute;
		left: 22rpx;
		right: 22rpx;
		top: 254rpx;
	}

	.image-wrapper_2 {
		filter: drop-shadow(4rpx 0px 6rpx #ffd28a66);
		background-image: url('https://qiniu.ccchongya.com/chongya/images/16947555450438088436.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 238rpx;
	}

	.pos_5 {
		position: absolute;
		left: 0;
		top: 0;
	}

	.image_2 {
		width: 248rpx;
		height: 84rpx;
	}

	.text_4 {
		color: #000000;
	}

	.pos_7 {
		position: absolute;
		left: 249rpx;
		top: 30rpx;
	}

	.section_3 {
		padding: 28rpx 28rpx 0;
		background-color: #ffffff;
		border-radius: 0px 20rpx 20rpx 20rpx;
		overflow: hidden;
	}

	.pos_8 {
		position: absolute;
		left: 0;
		right: 0;
		top: 84rpx;
	}

	.section_4 {
		padding: 44rpx 16rpx 44rpx 22rpx;
		background-color: #cfcfcf00;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.space-x-14>view:not(:first-child),
	.space-x-14>text:not(:first-child),
	.space-x-14>image:not(:first-child) {
		margin-left: 28rpx;
	}

	.text-wrapper {
		padding: 8rpx 0;
		background-color: #4578ff;
		border-radius: 50%;
		width: 41rpx;
		height: 41rpx;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: HarmonyOSSansSC;
		line-height: 26rpx;
		color: #ffffff;
	}

	.space-y-12>view:not(:first-child),
	.space-y-12>text:not(:first-child),
	.space-y-12>image:not(:first-child) {
		margin-top: 24rpx;
	}

	.space-x-8>view:not(:first-child),
	.space-x-8>text:not(:first-child),
	.space-x-8>image:not(:first-child) {
		margin-left: 16rpx;
	}

	.font_2 {
		font-size: 28rpx;
		font-family: HarmonyOSSansSC;
		line-height: 26rpx;
		color: #081329;
	}

	.section_5 {
		margin-top: 22rpx;
		padding: 36rpx 16rpx 44rpx 22rpx;
		background-color: #f7f6f5;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.text-wrapper_2 {
		padding: 8rpx 0;
		background-color: #43cf7c;
		border-radius: 50%;
		width: 41rpx;
		height: 41rpx;
	}

	.text_5 {
		color: #081329;
		font-size: 32rpx;
		font-family: HarmonyOSSansSC;
		line-height: 30rpx;
	}

	.group {
		padding: 124rpx 0 52rpx;
	}

	.section_6 {
		background-color: #f7cd1c;
		border-radius: 232rpx;
		filter: blur(16rpx);
		width: 359rpx;
		height: 20rpx;
	}

	.text-wrapper_3 {
		padding: 32rpx 0 36rpx;
		background-color: #ffbd52;
		border-radius: 100rpx;
		width: 526rpx;
	}

	.pos_9 {
		position: absolute;
		right: 56rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.text_6 {
		color: #00000082;
		font-size: 36rpx;
		font-family: HarmonyOSSansSC;
		line-height: 33rpx;
	}

	.section {
		background-image: url('https://qiniu.ccchongya.com/chongya/images/16947555449274837621.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 375rpx;
		height: 378rpx;
	}

	.pos {
		position: absolute;
		right: -22rpx;
		top: -240rpx;
		z-index: 999;
	}

	.text_3 {
		color: #000000;
		font-size: 28rpx;
		font-family: HarmonyOSSansSC;
		font-weight: 700;
		line-height: 26rpx;
	}

	.pos_6 {
		position: absolute;
		left: 70rpx;
		top: 284rpx;
	}
</style>
